<!DOCTYPE html>
<!--

 , __                                   __
/|/  \                                 /  \
 | __/ ,_    __           ,   _   ,_  | __ |          _   , _|_
 |   \/  |  /  \_|  |  |_/ \_|/  /  | |/  \|  |   |  |/  / \_|
 |(__/   |_/\__/  \/ \/   \/ |__/   |_/\__/\_/ \_/|_/|__/ \/ |_/

OBEYi presents an HTML5 mini-MMORPG by Little Workshop http://www.littleworkshop.fr

* Client libraries used: RequireJS, Underscore.js, jQuery, Modernizr
* Server-side: Node.js, Socket.io
* Should work in latest versions of Firefox, Chrome, Safari, Opera, Safari Mobile and Firefox for Android

 -->
<html lang="en">
	<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
        <link rel="icon" type="image/png" href="img/common/favicon.png">
        <meta property="og:title" content="BrowserQuest">
        <meta property="og:type" content="website">
        <meta property="og:url" content="http://browserquest.mozilla.org/">
        <meta property="og:image" content="http://browserquest.mozilla.org/img/common/promo-title.jpg">
        <meta property="og:site_name" content="BrowserQuest">
        <meta property="og:description" content="Play OBEYi's BrowserQuest, an HTML5 massively multiplayer game demo powered by WebSockets!">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <link rel="stylesheet" href="css/achievements.css" type="text/css">

        <link href="img/common/apple-touch-icon-57x57.png" rel="apple-touch-icon-precomposed" sizes="57x57">
        <link href="img/common/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72">
        <link href="img/common/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114">
        <link href="img/common/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144">

        <link href="img/common/apple-touch-startup-image-320x460.png" rel="apple-touch-startup-image" media="(device-width: 320px)">
        <link href="img/common/apple-touch-startup-image-640x920.png" rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)">
        <link href="img/common/apple-touch-startup-image-768x1004.png" rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)">
        <link href="img/common/apple-touch-startup-image-748x1024.png" rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)">
        <link href="img/common/apple-touch-startup-image-1536x2008.png" rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
        <link href="img/common/apple-touch-startup-image-1496x2048.png" rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">

        <script src="js/lib/modernizr.js" type="text/javascript"></script>
        <!--[if lt IE 9]>
                <link rel="stylesheet" href="css/ie.css" type="text/css">
                <script src="js/lib/css3-mediaqueries.js" type="text/javascript"></script>
                <script type="text/javascript">
                document.getElementById('parchment').className = ('error');
                </script>
        <![endif]-->
        <script src="js/detect.js" type="text/javascript"></script>
        <title>BrowserQuest</title>
	</head>
    <!--[if lt IE 9]>
	<body class="intro upscaled">
    <![endif]-->
	<body class="intro">
	    <noscript>
	       <div class="alert">
	           You need to enable JavaScript to play BrowserQuest.
	       </div>
	    </noscript>
	    <div id="intro">
	        <h1 id="logo">
			<a href="/news"></a>
			<a href="/history.html"></a>
			<a href="/article.html"></a>
	           <span id="logosparks">

	           </span>
	        </h1>
	        <article id="portrait">
	            <p>
	               Please rotate your device to landscape mode
	            </p>
	            <div id="tilt"></div>
	        </article>
	        <section id="parchment" class="createcharacter">
	            <div class="parchment-left"></div>
	            <div class="parchment-middle">
                    <article id="createcharacter">
          	           <h1>
          	               <span class="left-ornament"></span>
          	               Create New Character
          	               <span class="right-ornament"></span>
                         </h1>
                         <form action="none" method="get" accept-charset="utf-8">
                             <input type="text" id="nameinput" class="stroke" name="player-name" placeholder="Character Name" maxlength="12">
                             <input type="password" id="pwinput" class="stroke" name="player-pw" placeholder="Password" maxlength="15">
                             <input type="password" id="pwinput2" class="stroke" name="player-pw2" placeholder="Confirm Password" maxlength="15">
                             <input type="email" id="emailinput" class="stroke" name="player-email" placeholder="Email address" maxlength="48">
                         </form>
                         <div class="play">
                           <span class="link">Create</span>
                         </div>
                         <div class="validation-summary"></div>
                    </article>
                    <article id="loadcharacter">
          	           <h1>
          	               <span class="left-ornament"></span>
          	               BrowserQuest
          	               <span class="right-ornament"></span>
                         </h1>
                         <form action="none" method="get" accept-charset="utf-8">
                             <input type="text" id="loginnameinput" class="stroke" name="player-name" placeholder="Character Name" maxlength="12" autofocus>
                             <input type="password" id="loginpwinput" class="stroke" name="player-loginpw" placeholder="Password" maxlength="15">
                         </form>
                         <div class="play">
                           <span class="link">Login</span>
                           <img src="img/common/spinner2.gif">
                         </div>
                         <div class="validation-summary"></div>
                         <div id="create-new">
                            <span class="link">New Character</span>
                         </div>
                    </article>
                    <article id="confirmation">
          	           <h1>
          	               <span class="left-ornament"></span>
                           You need to accept the following terms of usage before creating a new character.<br>
                           None right now - just Continue!<br><br>
          	               <span class="right-ornament"></span>
                         </h1>
                         <div id="continue">
                         <span class="link">Continue</span>
                         </div>
                         <div id="cancel">
                            <span class="link">Cancel</span>
                         </div>
                    </article>
    	            <article id="credits">
        	            <h1>
         	               <span class="left-ornament"></span>
         	               <span class="title">
         	                   Made for OBEYi by <a target="_blank" class="stroke clickable" href="http://www.littleworkshop.fr/">Little Workshop</a>
         	               </span>
         	               <span class="right-ornament"></span>
                        </h1>
                        <div id="authors">
                            <div id="guillaume">
                                <div class="avatar"></div>
                                Pixels by
                                <a class="stroke clickable" target="_blank" href="http://twitter.com/glecollinet">Guillaume Lecollinet</a>
                            </div>
                            <div id="franck">
                                <div class="avatar"></div>
                                Code by
                                <a class="stroke clickable" target="_blank" href="http://twitter.com/whatthefranck">Franck Lecollinet</a>
                            </div>
                        </div>
                        <div id="seb">

                            <span id="note"></span>
                            Music by <a class="clickable" target="_blank" href="http://soundcloud.com/gyrowolf">Terrel O'Brien</a>, <a class="clickable" target="_blank" href="http://blog.dayjo.org">Joel Day</a>, <a class="clickable" target="_blank" href="http://www.dantilden.com">Dan Tilden</a>, &amp; <a target="_blank" class="clickable" href="http://soundcloud.com/aaron-anderson-11">Aaron Krogh</a>

                        </div>
	                    <div id="close-credits">
	                        <span>- click anywhere to close -</span>
                        </div>
    	            </article>
    	            <article id="about">
        	            <h1>
         	               <span class="left-ornament"></span>
         	               <span class="title">
         	                   What is BrowserQuest?
         	               </span>
         	               <span class="right-ornament"></span>
                        </h1>
                        <p id="game-desc">
                            BrowserQuest is a multiplayer game inviting you to explore a
                            world of adventure from your Web browser.
                        </p>
                        <div class="left">
                            <div class="img"></div>
                            <p>
                                This demo is powered by HTML5 and WebSockets, which allow for real-time gaming and apps on the Web.
                            </p>
                            <span class="link">
                                <span class="ext-link"></span>
                                <a target="_blank" class="clickable" href="http://hacks.mozilla.org/2012/03/browserquest/">Learn more</a> about the technology
                            </span>
                        </div>
                        <div class="right">
                            <div class="img"></div>
                            <p>
                                BrowserQuest is available on Firefox, Chrome, Safari as well as iOS devices and Firefox for Android.
                            </p>
                            <span class="link">
                                <span class="ext-link"></span>
                                <a target="_blank" class="clickable" href="http://github.com/browserquest/BrowserQuest">Grab the source</a> on Github
                            </span>
                        </div>
                      <div id="close-about">
                          <span>- click anywhere to close -</span>
                        </div>
                  </article>
    	            <article id="death">
                        <p>You are dead...</p>
    					<div id="respawn" class="button"></div>
    	            </article>
                    <article id="error">
          	           <h1>
          	               <span class="left-ornament"></span>
          	               Your browser cannot run BrowserQuest!
          	               <span class="right-ornament"></span>
                         </h1>
                         <p>
                             We're sorry, but your browser does not support WebSockets.<br>
                             In order to play, we recommend using the latest version of Firefox, Chrome or Safari.
                         </p>
                    </article>
                    <article id="legal">
          	           <h1>
          	               <span class="left-ornament"></span>
          	               Privacy
          	               <span class="right-ornament"></span>
                         </h1>
                         <p>
                             BrowserQuest stores your character name, game achievements and equipment in your browser and does not send them to OBEYi. We do collect server log data (such as IP address) as well as web analytics data. We handle info we receive about you as explained in our <a class="clickable" target="_blank" href="http://www.mozilla.org/en-US/privacy-policy">Privacy Policy</a>.
                         </p>
 	                    <div id="close-legal">
 	                        <span>- click anywhere to close -</span>
                         </div>
                    </article>
	            </div>
	            <div class="parchment-right"></div>
	        </section>
	    </div>

		<div id="container">
		    <div id="canvasborder">
		        <article id="instructions" class="clickable">
		            <div class="close"></div>
		            <h1>
     	               <span class="left-ornament"></span>
     	               How to play
     	               <span class="right-ornament"></span>
	                </h1>
	                <ul>
	                   <li><span class="icon"></span>Left click or tap to move, attack and pick up items. Hold SHIFT to attack another player.</li>
	                   <li><span class="icon"></span>Press ENTER to chat.</li>
	                   <li><span class="icon"></span>Your character is automatically saved as you play. The blue line on the right is your exp bar.</li>
	                </ul>
	                    <p>- click anywhere to close -</p>
		        </article>
		        <article id="achievements" class="page1 clickable">
		            <div class="close"></div>
		            <div id="achievements-wrapper">
		                <div id="lists">
        		        </div>
    		        </div>
    		        <div id="achievements-count" class="stroke">
    		            Completed
    		            <div>
    		                <span id="unlocked-achievements">0</span>
    		                /
    		                <span id="total-achievements"></span>
    		            </div>
                    Close
    		        </div>
		            <nav class="clickable">
		                <div id="previous"></div>
		                <div id="next"></div>
		            </nav>
		        </article>
    			<div id="canvas">
    				<canvas id="background"></canvas>
    				<canvas id="entities"></canvas>
    				<canvas id="foreground" class="clickable"></canvas>
    			</div>
    			<div id="bubbles"></div>
     			<div id="expbar"></div>
     			<div id="textWindow"></div>
    			<div id="inspector">
                    <div class="headshot"><div> </div></div>
                    <div class="details">
                        <div class="name"></div>
                        <div class="level"></div>
                        <div class="health"></div>
                    </div>
                </div>
                <div id="dropDialog">
                    <div id="dropTitle">Input drop count.</div>
                    <div align="center">
                        <input type="text" id="dropCount" size="6" maxlength="6">
                        <span id="dropAccept">&nbsp;Accept&nbsp;</span>
                        <span id="dropCancel">&nbsp;Cancel&nbsp;</span>
                    </div>
                </div>
 			<div id="achievement-notification">
    			    <div class="coin">
    			        <div id="coinsparks"></div>
    			    </div>
    			    <div id="achievement-info">
        			    <div class="title">New Achievement Unlocked!</div>
        			    <div class="name"></div>
    			    </div>
    			</div>
    			<div id="bar-container">
					<div id="healthbar">
					</div>
					<div id="hitpoints">
					</div>
					<div id="weapon"></div>
					<div id="armor"></div>
					<div id="notifications">
					    <div>
					       <span id="message1"></span>
					       <span id="message2"></span>
					    </div>
					</div>
                    <div id="playercount" class="clickable">
                        <span class="count">0</span> <span>players</span>
                    </div>
                    <div id="barbuttons">
                        <div id="chatbutton" class="barbutton clickable"></div>
                        <div id="achievementsbutton" class="barbutton clickable"></div>
                        <div id="helpbutton" class="barbutton clickable"></div>
                        <div id="mutebutton" class="barbutton clickable active"></div>
                    </div>
    			</div>
				<div id="chatbox">
				    <form action="none" method="get" accept-charset="utf-8">
					    <input id="chatinput" class="gp" type="text" maxlength="60">
				    </form>
				</div>
				<!-- TODO div id="dialogbox">
					Right now this happens in the footer.
				</div to accept members for instance… -->
                <div id="population">
                    <div id="instance-population" class="">
                        <span>0</span> <span>players</span> in your instance
                    </div>
                    <div id="guild-population" class="">
						<span>0</span> <span>players</span> in «&nbsp;<span id="guild-name"></span>&nbsp;»
					</div>
                    <div id="world-population" class="">
                        <span>0</span> <span>players</span> total
                    </div>
                </div>
		    </div>
		</div>
		<ul id="page-tmpl" class="clickable" style="display:none">
        </ul>
        <ul>
            <li id="achievement-tmpl" style="display:none">
                <div class="coin"></div>
                <span class="achievement-name">???</span>
                <span class="achievement-description">???</span>
                <div class="achievement-sharing">
                  <a href="" class="twitter"></a>
                </div>
            </li>
        </ul>

        <img src="img/common/thingy.png" alt="" class="preload">

        <div id="resize-check"></div>

        <script type="text/javascript" src="https://cdn.socket.io/socket.io-1.2.0.js"></script>

        <script type="text/javascript">
            var ctx = document.querySelector('canvas').getContext('2d'),
                parchment = document.getElementById("parchment");

            if(!Detect.supportsWebSocket()) {
                parchment.className = "error";
            }

            if(ctx.mozImageSmoothingEnabled === undefined) {
                document.querySelector('body').className += ' upscaled';
            }

            parchment.className = "loadcharacter";
        </script>

        <script src="js/lib/log.js"></script>
        <script>
                var require = { waitSeconds: 60 };
        </script>
        <script data-main="js/home" src="js/lib/require-jquery.js"></script>
		<p style="opacity:0.2;pointer-event:none;user-select: none;">
		BrowserQuest is a tribute to classic video-games with a multiplayer twist. You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. And it’s all done in glorious HTML5 and JavaScript.
		
		A multiplayer experience
BrowserQuest screenshot

BrowserQuest can be played by thousands of simultaneous players, distributed across different instances of the in-game world. Click on the population counter at any time to know exactly how many total players are currently online.

Players can see and interact with each other by using an in-game chat system. They can also team up and fight enemies together.

BrowserQuest is a game of exploration: the more dangerous the places you go, the better the rewards.

Powered by WebSockets
WebSockets are a new technology enabling bi-directional communication between a browser and a server on the web.

BrowserQuest is a demo of how this technology can be used today to create a real-time multiplayer game in a single webpage. When you start to play, your browser opens up a WebSocket connection to one of several load-balanced game servers. Each server hosts multiple world instances and handles the player synchronization and game logic within all instances. Because the server code is running on Node.js, both the server and client codebases share a small portion of the same JavaScript source code.

Server code is available on Github.

BrowserQuest screenshot

Built on the Web platform
BrowserQuest makes extensive use of different web technologies, such as:

HTML5 Canvas, which powers the 2D tile-based graphics engine.
Web workers, allowing to initialize the large world map without slowing down the homepage UI.
localStorage, in which the progress of your character is continually saved.
CSS3 Media Queries, so that the game can resize itself and adapt to many devices.
HTML5 audio, so you can hear that rat or skeleton die!
Available everywhere
Since BrowserQuest is written in HTML5/JavaScript, it is available across a lot of different browsers and platforms. The game can be played in Firefox, Chrome and Safari. With WebSockets enabled, it’s also playable in Opera. Moreover, it’s compatible with iOS devices, as well as tablets and phones running Firefox for Android.

BrowserQuest screenshot

The mobile versions are more experimental than the desktop experience, which has richer features and performance, but it’s an early glimpse of what kind of games will be coming to the mobile Web in the future. Give it a try with your favorite mobile device!

Join the adventure
Want to be part of BrowserQuest? Create your own character and venture into the world. Fight enemies by yourself or with friends to get your hands on new equipment and items. You might even stumble upon a couple of surprises along the way…

Technology
BrowserQuest is a demonstration of a number of modern web technologies. It is written in HTML5, utilizing WebSockets for multiplayer networking, and is playable from modern web browsers. The client makes use of HTML5's canvas element to render the graphics, web workers to initialize the map without affecting the rest of the page, localStorage to save progress, media queries to dynamically resize the game to the device, and HTML5 Audio to render the sound. The server is written in JavaScript, and runs in Node.js. The server and browser communicate using WebSockets.

Both BrowserQuest's client and server source code are available on GitHub.[2] Its code is licensed under MPL 2.0. Content is licensed under CC BY-SA 3.0.[3]

Gameplay
In BrowserQuest, players can interact with each other using the in-game chat system, or by working together to defeat enemies.[2] There are achievements available to unlock as one plays. Loot is dropped when players defeat the enemies, which can be picked up by any player. Loot includes the invincibility potion, which changes a player's outfit to appear like the Firefox logo, and various gear. At one point in time, the system recorded over 1,900 concurrent users playing at the same time.[4][5][6]

Influences
Mozilla does not currently have the resources to maintain BrowserQuest. But it has influenced a variety of indie game developers to continue on the idea leading to many community forks:

English
browserquest/browserquest – The general development group running game here, you're welcome to join at https://browserquest.herokuapp.com/
ParticleQuest – Making particle physics fun. The goal of this project is to create a science-based story modifying BrowserQuest.
nenuadrian/browserquest – 06.08.2015 - Original game brought up to date and upgraded to the latest SOCKET.IO plus other minor improvements.
Demo (not always online, sorry): http://browserquest.codevolution.com
0xMatt/BrowserQuest – BrowserQuest updated with modern development tools like webpack & converted to TypeScript.
WTF-Adventure – Expands upon Tap Tap Adventure but updated for babel ES6, webpack, browsersync and includes documentation and unit tests.
Kaetram – Completely redone game-engine. Assets remain the same. https://github.com/Veradictus/Kaetram-Open
Kaetram-Next – Kaetram fork written in TypeScript and actively maintained with the Kaetram repository.
French
Orientation: http://www.orientation.auvergne.fr/jeu/client/
Korean
Burger Burger Online: http://burgerburger.kr – Extremely well developed, significantly expanded from the original BrowserQuest
Community: http://asky.freethinker.kr
English is added and named QuestWorld
Older source: https://github.com/browserquest/BrowserQuest-Asky
Recent Version: https://questworld.org/
Chinese
BrowserQuest-PHP: http://www.workerman.net/demos/browserquest/ BrowserQuest reworked in PHP by Walkor
Source: https://github.com/walkor/BrowserQuest-PHP
Android
BrowserQuest for Android – BrowserQuest client, available in the Android store
Windows Phone
BrowserQuest for Windows Phone – BrowserQuest, in Windows Phone store
Erlang based
sedrik/bqs – Erlang implementation of the BrowserQuest server
C++ based
chain710/browserquestcc – C++ implementation of the BrowserQuest server

BrowserQuest
‪Mads & Peter Sandberg Brun‬
Official Club
Wish list
Entertainment Software Rating BoardEVERYONE 10+
Fantasy Violence, Mild Blood
Users Interact
In-Game Purchases
BrowserQuest is a small multiplayer game inviting you to explore a world of adventure from your Windows device.

You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. As you discover more of the world, you can try to complete the built in quests/achievements or fight against other players.

So what are you waiting for? Download the game right now and start your journey into the unknown and mysterious world.

Note: This version of BrowserQuest is a modified and extended version of the original, so that it works on Windows and runs with its own dedicated servers. The original version is created by Little Workshop.

Support: If you experience any errors, then please contact us by e-mail (apps@mpbrun.dk).

More
Free
+
Offers in-app purchases
Get

+ Offers in-app purchases
See System Requirements
BrowserQuest
Overview System Requirements
Free
+
Get
Available on
 PC  Mobile device  Hub
Description

BrowserQuest is a small multiplayer game inviting you to explore a world of adventure from your Windows device.

You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. As you discover more of the world, you can try to complete the built in quests/achievements or fight against other players.

So what are you waiting for? Download the game right now and start your journey into the unknown and mysterious world.

Note: This version of BrowserQuest is a modified and extended version of the original, so that it works on Windows and runs with its own dedicated servers. The original version is created by Little Workshop.

Support: If you experience any errors, then please contact us by e-mail (apps@mpbrun.dk).


		</p>
	</body>
</html>
